<template>
	<view>
		<view class="wrapper">
			<u-parse :content="camp.content"></u-parse>
		</view>

		<view class="foorter-wrapper">
			<view class="footer-box">
				<view class="footer-icon">
					<image src="/static/img/shareIcon.png"></image>
					<span>分享</span>
					<button open-type="share"></button>
				</view>
				<view class="footer-icon" @click="toggleCollect">
					<image src="/static/img/collect_selected.png" v-if="camp.collect"></image>
					<image src="/static/img/collect_default.png" v-else></image>
					<span>{{ camp.collect ? "已收藏":"收藏" }}</span>
				</view>
				<view class="footer-btn primary" @click="isShowContact=true">预定营地</view>
			</view>
		</view>

		<!-- 营地联系信息 -->
		<u-popup :show="isShowContact" @close="isShowContact=false">
			<view class="contact-wrapper">
				<image class="contact-wrapper_bg" mode="aspectFill" src="/static/img/windowsBg.png">
				</image>
				<view class="contact-wrapper_hd">
					<view class="contact-wrapper_title">
						<view>营地联系信息</view>
						<view class="desc">请先联系营地人员确认营业情况后再进行预订</view>
					</view>
					<view class="close-btn">
						<u-icon name="close" color="#1A1311" size="48"></u-icon>
						<view class="hotarea" @click="isShowContact=false"></view>
					</view>
				</view>
				<view class="contact-wrapper_bd">
					<view class="contact-box" @click="handleCopyWX(camp.wechat)">
						<text class="contact-label">营地微信号</text>
						<text class="contact-value">{{camp.wechat || '-'}}</text>
						<view class="contact-box_ft">复制微信号</view>
					</view>
					<view class="contact-box" @click="handleCall(camp.phone)">
						<text class="contact-label">营地手机号</text>
						<text class="contact-value">{{camp.phone || '-'}}</text>
						<view class="contact-box_ft">拨打电话</view>
					</view>
				</view>
				<view class="contact-wrapper_ft" v-if="userInfo.member">
					<button class="contact-btn" @click="handleConfirm">已联系确认，继续预定</button>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		getCamp,
		collectCamp
	} from '@/api/camp.js'
	import {
		createOrder,
		payOrder,
		queryOrder
	} from '@/api/order.js'
	import {
		mapGetters
	} from "vuex";

	export default {
		computed: {
			...mapGetters({
				userInfo: 'userInfo',
			})
		},
		data() {
			return {
				options: {},
				// 营地信息
				camp: null,
				isShowContact: false,
			};
		},

		onLoad(options) {
			let that = this
			that.options = options
		},

		onShow() {
			this._getUserInfo()
			this.initPage()
		},

		/**
		 * 分享微信好友
		 */
		onShareAppMessage() {
			const that = this
			let {
				campId,
				campName,
				coverImg
			} = that.camp
			return {
				path: `/pages/camp/detail?campId=${campId}`,
				title: campName,
				imageUrl: coverImg,
			}
		},
		/**
		 * 分享微信朋友圈
		 */
		onShareTimeline() {
			const that = this
			let {
				campId,
				campName,
			} = that.camp
			return {
				title: campName,
				query: `campId=${campId}`,
			}
		},

		methods: {
			// 获取用户信息
			_getUserInfo() {
				let that = this
				that.$store.dispatch('getUserInfo')
			},

			// 初始化数据
			initPage() {
				let that = this
				getCamp({
					campId: that.options.campId
				}).then(res => {
					that.camp = res.data
					uni.setNavigationBarTitle({
						title: res.data.campName,
					})
				})
			},

			// 收藏
			toggleCollect() {
				let that = this
				collectCamp({
					campId: that.options.campId
				}).then(res => {
					that.camp.collect = !that.camp.collect
					if (that.camp.collect) {
						that.$util.showToast('已收藏')
					} else {
						that.$util.showToast('已取消')
					}
				})
			},

			// 确认预定
			handleConfirm() {
				let that = this
				uni.showLoading()
				createOrder({
					"buyType": 20,
					"campId": that.options.campId,
				}).then(res => {
					return payOrder({
						orderNo: res.data.orderNo
					})
				}).then(res => {
					let {
						needPay,
						result,
						orderNo
					} = res.data
					queryOrder({
						orderNo: orderNo
					}).then(res => {
						if (res.data.isPay) {
							uni.showModal({
								title: '预订成功',
								content: `您已成功预订营地，已扣除1次营地预订权益，当前剩余${that.userInfo.campNum-1}次免费预订营地权益`,
								showCancel: false,
								confirmText: '我知道了',
							});
						}
						uni.hideLoading()
					})
				})
			},

			// 复制微信号
			handleCopyWX(str) {
				console.log(str)
				let that = this
				uni.setClipboardData({
					data: str.toString(),
					success: res => {
						that.$util.showSuccess('已复制')
						that.isShowPopup = false
					}
				})
			},

			// 拨打电话
			handleCall(str) {
				let that = this
				uni.makePhoneCall({
					phoneNumber: str,
					success: () => {
						that.isShowPopup = false
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.wrapper {
		padding: 32rpx;
		background-color: #fff;
	}

	.contact-wrapper {
		position: relative;

		.contact-wrapper_bg {
			position: absolute;
			top: 0;
			left: 0;
			display: block;
			width: 100%;
			height: 100%;
			// z-index: 1;
		}

		.contact-wrapper_hd {
			display: flex;
			padding: 48rpx 32rpx;
			z-index: 10;
			position: relative;

			.contact-wrapper_title {
				flex: 1;
				font-size: 34rpx;
				font-weight: bold;

				.desc {
					font-size: 28rpx;
					font-weight: normal;
					margin-top: 16rpx;
				}
			}

			.close-btn {
				position: relative;
				display: block;
				width: 48rpx;
				height: 48rpx;

				.hotarea {
					opacity: 0;
					position: absolute;
					top: -24rpx;
					left: -24rpx;
					right: -24rpx;
					bottom: -24rpx;
				}
			}
		}

		.contact-wrapper_bd {
			padding: 0 32rpx;
			z-index: 10;
			position: relative;

			.contact-box {
				display: flex;
				align-items: center;
				background-color: rgba(247, 245, 240, 1);
				border: 1rpx solid rgba(26, 19, 17, 1);
				font-size: 28rpx;
				color: rgba(26, 19, 17, 1);
				padding: 48rpx 32rpx;
				border-radius: 16rpx;

				.contact-label {
					color: rgba(26, 19, 17, 0.5);
				}

				.contact-value {
					flex: 1;
					margin-left: 24rpx;
				}

				.contact-box_ft {
					font-weight: bold;
				}

				&+.contact-box {
					margin-top: 32rpx;
				}
			}
		}

		.contact-wrapper_ft {
			position: relative;
			padding: 48rpx 32rpx;

			.contact-btn {
				background-color: rgba(26, 19, 17, 1);
				border: 1rpx solid rgba(26, 19, 17, 1);
				border-radius: 48rpx;
				box-sizing: border-box;
				line-height: 96rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #fff;
				text-align: center;
			}
		}
	}

	.foorter-wrapper {
		&::before {
			content: '';
			display: block;
			height: 160rpx;
			z-index: 9999;
		}

		.footer-box {
			border-top: 1rpx solid rgba(26, 19, 17, .1);
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 160rpx;
			background-color: rgba(247, 245, 240, 1);
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 0 24rpx;

			.footer-icon {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				line-height: 40rpx;
				width: 96rpx;
				height: 96rpx;
				position: relative;

				image {
					display: block;
					width: 48rpx;
					height: 48rpx;
					margin-bottom: 8rpx;
				}

				button {
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					right: 0;
					background-color: red;
					opacity: 0;
				}
			}

			.footer-btn {
				flex: 1;
				line-height: 96rpx;
				border: 1rpx solid rgba(26, 19, 17, 1);
				font-size: 32rpx;
				font-weight: bold;
				color: rgba(26, 19, 17, 1);
				margin-left: 24rpx;
				border-radius: 48rpx;
				text-align: center;
				box-sizing: border-box;

				&.primary {
					background-color: rgba(26, 19, 17, 1);
					color: #fff;
				}

			}

		}
	}
</style>
